<template>
    <div class="usename-box untouchable">
        <el-input v-model="inputValue" :type="type" :inputmode="inputMode" class="box-usename" ref="boxInputRef"
            @focus="focusInput = true" @blur="focusInput = false" maxlength="10" @keydown.left.right.up.down.prevent />
        <div @click="clickBox" :style="boxStyle" class="input">
            <div :class="`username-text ${focusInput ? 'active' : ''}`">
                {{ inputValue }}
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    modelValue: {
        type: String,
        default: ""
    },
    height: {
        type: [String, Number],
        default: 20
    },
    background: {
        type: String,
        default: "#fff"
    },
    type: {
        type: String,
        default: "password"
    },
    inputMode: {
        type: String,
        default: "email"
    }
})

const boxStyle = computed(() => {
    const size = props.height.toString().includes("px") ? props.height : props.height + "px"
    return `width: calc(100% - 10px);height: ${size};background: ${props.background};border-radius: 3px;padding: 5px;line-height: ${size};`
})

const focusInput = ref(false)

const boxInputRef = ref(null)

const emit = defineEmits(["update:modelValue", "complete"])

const inputValue = ref(props.modelValue)

watch(inputValue, (newValue) => {
    emit("update:modelValue", newValue)
})
const clickBox = () => {
    boxInputRef.value.focus()
}
</script>

<style>
.box-usename {
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    position: absolute !important;
    pointer-events: none !important
}

.username-text {
    width: fit-content;
    min-width: 1px;
    height: 100%;
}

.username-text.active {
    border-right: .1em solid rgba(0, 0, 0, .4);
    animation: blinkCaret 1.2s step-start infinite forwards;
}

@keyframes blinkCaret {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: rgba(0, 0, 0, .4)
    }
}
</style>